<template>
  <q-splitter
      v-model="splitterModel"
      style="height: 550px"
    >
      <template v-slot:before>
        <q-tabs
          v-model="tab"
          vertical
          class="text-teal shadow-2 text-bold"
        >
          <q-tab name="tab-board" icon="mdi-view-dashboard-variant-outline">
            <q-tooltip anchor="center right">快速看板</q-tooltip>
          </q-tab>
          <q-tab name="tab-monitor" icon="mdi-monitor-screenshot">
            <q-tooltip anchor="center right">实时监控</q-tooltip>
          </q-tab>
          <q-tab name="tab-sheet" icon="mdi-chart-line">
            <q-tooltip anchor="center right">统计分析</q-tooltip>
          </q-tab>
          <q-tab name="tab-alarm" icon="mdi-alarm-light">
            <q-tooltip anchor="center right">报警记录</q-tooltip>
          </q-tab>
        </q-tabs>
      </template>
      <template v-slot:after>
        <q-tab-panels
          v-model="tab"
          animated
          transition-prev="slide-down"
          transition-next="slide-up"
        >
          <q-tab-panel name="tab-board">
            <ListItem :menu-list="boardArr"/>
          </q-tab-panel>
          <q-tab-panel name="tab-monitor">
            <ListItem :menu-list="monitorArr"/>
          </q-tab-panel>
          <q-tab-panel name="tab-sheet">
            <ListItem :menu-list="sheetArr"/>
          </q-tab-panel>
          <q-tab-panel name="tab-alarm">
            <ListItem :menu-list="alarmArr"/>
          </q-tab-panel>
        </q-tab-panels>
      </template>

    </q-splitter>
</template>

<script lang="ts">
import { defineComponent, toRefs, onMounted, ref, onBeforeMount } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { CRouteItem } from 'stores/model';
import { useMenuTabStore } from 'stores/menuTabStore';
import { CProjectNode, EPageType } from 'src/stores/editorModels';
import { CTreeItemVO } from 'src/hook/common/useCommonTreeType';
import { useCommonStore } from 'stores/commonStore';

import ListItem from 'layouts/ListItem.vue';

export default defineComponent({
  name: 'MenuTabs',
  components: {
    ListItem
  },
  props: {
    pageTreeList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  setup (props, context) {
    //路由器
    const router = useRouter();
    const route = useRoute();

    //结构
    const {
      pageTreeList
    } = toRefs(props);

    //store
    const store = useMenuTabStore();
    const commonStore = useCommonStore();
    const {
      application
    } = toRefs(commonStore);
    let tab = ref('tab-board');
    let splitterModel = ref(20);

    //********************************************************************
    //                    菜单列表
    //********************************************************************
    //看板
    let boardArr = [
      { id: 1, icon: 'mdi-account-circle-outline', url: '/board/device', label: '设备连接' },
      { id: 2, icon: 'mdi-alpha-h-circle-outline', url: '/board/map', label: '快速地图' }
    ];

    //实时监控
    let monitorArr = [
      { id: 1, icon: 'mdi-bullseye', url: '/monitor/table', label: '列表监控' },
      { id: 2, icon: 'mdi-calendar-check-outline', url: '/monitor/graph', label: '图形监控' }
    ];

    //报表
    let sheetArr = [
      { id: 1, icon: 'mdi-chat-remove-outline', url: '/sheet/chart', label: '图表曲线' },
      { id: 2, icon: 'mdi-circle-slice-5', url: '/sheet/grid', label: '列表分析' }
    ];

    //报警信息
    let alarmArr = [
      { id: 1, icon: 'mdi-bread-slice-outline', url: '/alarm/grid', label: '报警列表' },
      { id: 2, icon: 'mdi-camera-metering-partial', url: '/alarm/disposal', label: '处理记录' }
    ];

    //********************************************************************
    //                  业务处理逻辑
    //********************************************************************
    let myProject = ref<CProjectNode>({
      id: 0,
      cname: '',
      companyId: 0,
      wsAddr: '',
      wsPort: 0,
      sortCode: '',
      description: ''
    });

    //项目名称
    const findTreeListName = (list: CTreeItemVO[], id: number): string => {
      let index = 0;
      index = list.findIndex((item) => (item.sid === id.toString()));
      if (index !== -1) {
        return list[index].name;
      } else {
        return 'err';
      }
    }

    //路由跳转
    const gotoRoutePage = (id: number, pType: EPageType) => {
      //动态路由
      let route = {
        name: 'Editor',
        path: '/editor'
      };

      //使用query指定name,path都行
      router.push({
        path: route.path,
        query: {
          projectId: myProject.value.id,
          projectName: myProject.value.cname,
          pageType: pType,
          pageId: id
        }
      });
    }

    //********************************************************************
    //      菜单模块
    //********************************************************************
    //设备树选择
    const onProjectListSelected = (sid: string) => {
      //动态路由
      let route = {
        name: 'Project',
        path: '/project'
      };

      //动态路由跳转
      router.push(route.path);
    }


    //路由跳转
    const openMenu = (link: string) => {
      let u: CRouteItem = {
        name: '',
        path: link,
        meta: {
          icon: '',
          title: ''
        },
        component: '',
        children: []
      };

      // 路径不同就切换下
      if (u.path !== route.path) {
        router.push(u.path);
        store.addRouteTabs({
          name: u.meta.title,
          path: u.path
        });
      }
    }

    //当前菜单选中进入路由后状态
    const headerStyleActive = (m: CRouteItem) => {
      if (m.path !== '') {
        if (route.path === m.path) {
          return {
            color: '#1890ff'
          };
        }
      }
      return {};
    }

    //********************************************************************
    //      启动模块
    //********************************************************************
    //初始化
    const init = () => {

    }

    //挂载组件
    onMounted(() => {
      init();
    });

    //挂载组件之前
    onBeforeMount(() => {

    });

    return {
      tab,
      application,
      splitterModel,
      boardArr,
      monitorArr,
      sheetArr,
      alarmArr,
      pageTreeList,
      onProjectListSelected,
      openMenu,
      headerStyleActive
    };
  }
});
</script>

<style lang="scss" scoped>
.my-menu-link {
  color: white;
  background: #F2C037;
}
.my-project-title {
  padding: 0px;
  margin: 0px;
  background: #78c7d5;

}
</style>
